<template>
  <div class="edit-main">
    <Header />
    <div class="main-content">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div class="slidebar">
          <div class="list">
            <div
              v-for="(item, index) in list"
              :key="index"
              class="item"
              :class="activeIdx === index ? 'active' : ''"
              @click="changeActiveIdx(index, item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div class="content">
        <div class="form">
          <el-form
            v-show="true"
            ref="ruleForm"
            :model="ruleForm"
            label-width="80px"
            :rules="rules"
            class="login-form"
            auto-complete="on"
            label-position="right"
          >
            <div class="title-container">
              <h3 class="title">修改密码</h3>
            </div>
            <el-form-item label="原密码" prop="originPass">
              <el-input
                v-model="ruleForm.originPass"
                type="password"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="新密码" prop="pass">
              <el-input
                v-model="ruleForm.pass"
                type="password"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                v-model="ruleForm.checkPass"
                type="password"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                :loading="loading"
                type="primary"
                style="margin-bottom: 10px; height: 40px; font-size: 18px"
                @click.native.prevent="setPwd"
              >修改密码</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- <div class="copyright">
      版权所有：中科台达（浙江）信息技术有限公司｜ Copyright © 2019-2025
      casdelta.com All Right Reserved
      <br />
      <a href="https://beian.miit.gov.cn" target="view_window"
        >ICP备案号：浙ICP备19034790号-5</a
      >
    </div> -->
  </div>
</template>

<script>
import userManage from "@/api/system-settings/user-manage";
import Header from "@/layout/components/Header/index";
import userService from "@/api/user/index";
// import SliderCheck from '@/components/securityCode/SliderCheck'
import { removeloToken, setloToken } from "@/utils/loginAuth";
import { setCookie, getCookie, getpasCookie } from "@/utils/cookie";

import SecurityCode from "@/components/securityCode/securityCode";
import { getToken, setToken } from "@/utils/auth";
export default {
  name: "EditPassword",
  components: {
    SecurityCode,
    Header
  },
  data() {
    var validateOriginPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "",
        checkPass: "",
        originPass: ""
      },
      activeIdx: "",
      rules: {
        originPass: [
          { required: true, validator: validateOriginPass, trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur"
          }
        ],
        pass: [
          { required: true, validator: validatePass, trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur"
          }
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur"
          }
        ]
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
      identifyCodeType: "1234567890", // 定义验证类型 1.数字 2.字母
      identifyCode: "",
      inputCode: "", // text框输入的验证码
      inputStuats: 2
    };
  },
  computed: {
    list() {
      let arr = [...Array(26).keys()].map((i) => String.fromCharCode(i + 65));
      arr.unshift("#");
      return arr;
    }
  },
  mounted() {
    this.getOrganization();
  },
  methods: {
    async getOrganization() {
      let res = await userService.organizationTop();
      if (res.code === 1) {
        let result = await userService.queryOrganization(res.data[0].organizationNo);
        if (!getToken("organizationNo")) {
          setToken("organizationNo", result.data[0].organizationNo);
          setToken("organizationName", result.data[0].organizationName);
        }
      }
      if (!getToken("databaseName")) {
        let res = await userService.queryDatabaseNameByOrganizationNo(
          getToken("organizationNo")
        );
        setToken("databaseName", res.data.databaseName);
      }
    },
    //
    changeActiveIdx(idx, item) {
      this.activeIdx = idx;
      this.search = item;
      // console.log(this.search);
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    async setPwd() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          let data = `username=${sessionStorage.getItem(
            "account"
          )}&oldPassword=${this.ruleForm.originPass}&newPassword=${
            this.ruleForm.checkPass
          }`;
          let headers = {
            databaseName: getToken("databaseName"),
            accessToken: getToken("token"),
            Organizationlist: getToken("organizationList"),
            Organizationno:
              getToken("topOrganization") || getToken("organizationNo"),
            Virtualsystemno: getToken("virtualSystemNo")
          };
          let res = await userManage.editPassword(data, headers);
          if (res.code === 1) {
            this.$message.success("密码修改成功");
            localStorage.clear();
            sessionStorage.clear();
            await this.$store.dispatch("user/logout");
            this.$router.push(`/login?redirect=${this.$route.fullPath}`);
          } else if (res.msg === "原密码错误") {
            this.$message.warning("原密码错误");
          } else {
            this.$message.warning(res.msg);
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
$slidebarWidth: 40px;
.edit-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
  ::v-deep(.header) {
    flex-shrink: 0;
  }
  .main-content {
    height: calc(100% - 60px);
    background-color: #003947;
    display: flex;
    justify-content: space-between;
    .el-scrollbar {
      height: 100%;
      width: $slidebarWidth;
      background-color: #006988;
      .slidebar {
        width: $slidebarWidth;
        height: 100%;
        // overflow-y: auto;
        .list {
          width: 100%;
          height: 100%;
          border-radius: 50px;
          display: flex;
          flex-direction: column;
          .item {
            width: $slidebarWidth;
            height: $slidebarWidth;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            &:hover {
              animation-name: borderbg;
              animation-iteration-count: 1;
              animation-fill-mode: forwards;
              animation-duration: 0.5s;
            }
          }
          .active {
            font-weight: bold;
            background-color: #fff;
            color: #333;
            border-radius: 50px;
          }
        }
      }
    }
    .content {
      width: 100%;
      padding: 40px;
      padding-bottom: 60px;
      .form {
        width: 100%;
        height: 100%;
        padding: 40px 200px;
        background-color: #005267;
        .login-form {
          width: 100%;
          height: 100%;
          background-color: #003947;
          .title-container {
            height: 60px;
            background-color: #006987;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            margin-bottom: 80px;
            .title {
              font-weight: 700;
              font-size: 22px;
            }
          }
          .el-form-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            ::v-deep .el-form-item__content {
              margin-left: 20px !important;
            }
          }
        }
      }
    }
  }
  .copyright {
    position: fixed;
    width: 100%;
    position: absolute;
    bottom: 0px;
    text-align: center;
    color: white;
    line-height: 2;
    font-size: 10px;
    margin-bottom: 0;
    background-color: #044154;
  }
}

::v-deep .el-input {
  border: 1px solid #4ba7bd;
  border-radius: 5px;
}
::v-deep .el-form-item__label {
  color: #aeb9be;
}
::v-deep .el-input__inner {
  background-color: #0c5367 !important;
  border: none;
}
</style>
